<template>
  <div class="container">
    <NavBar title="课程详情"></NavBar>
    <div class="content" v-if="finish">
      <div class="course-thumb">
        <img :src="course.thumb" alt="">
      </div>
      <div class="course-title">{{course.title}}</div>
      <div class="course-stat">
        <div class="course-charge" :class="{free: course.is_free == 1}" v-html="course.is_free == 1 ? '免费' : `<span>￥</span>${course.charge}`"></div>
        <div class="user-count">{{course.user_count}}人已订阅</div>
      </div>
      <div class="line"></div>
      <van-tabs v-model="active" color="#3ca7fa" title-active-color="#3ca7fa" line-width="20px" @click="getCurrent">
        <van-tab title="介绍">
          <div class="course-desc" v-html="course.render_desc"></div>
        </van-tab>
        <Directory :chapters="chapters" :videos="videos" ref="Directory"></Directory>
        <Comment :comments="comments" :user="user" @comment="comment" ref="Comment"></Comment>
      </van-tabs>
      <van-goods-action v-if="current!=2 && active!=2">
        <van-goods-action-icon
          @click="collect"
          :icon="isCollect ? require('@/assets/images/collection_active.png') : require('@/assets/images/collection.png')"
          text="收藏"
        />
        <van-goods-action-button type="info" text="开始学习" @click="goStudy()"/>
      </van-goods-action>
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/common/Navbar';
import Directory from '@/components/common/Directory';
import Comment from '@/components/common/Comment';
import {
  getCourseDetail, getCourseComments, likeCourse, commentCourse,
} from '@/network/detail';
import { Notify } from 'vant';

export default {
  components: {
    NavBar,
    Directory,
    Comment,
  },
  data() {
    return {
      comments: [],
      user: {},
      current: 0,
      videos: [],
      course: {},
      chapters: [],
      user: {},
      active: 0,
      finish: false,
      isCollect: 0,
    };
  },
  methods: {
    getCurrent(index) {
      this.current = index;
    },
    collect() {
      if (!this.$store.state.user.isLogin) return Notify('请先登录');
      likeCourse(this.$route.query.id).then((res) => {
        if (res.data == 1) {
          this.isCollect = 1;
        } else {
          this.isCollect = 0;
        }
      });
    },
    goStudy() {
      this.$refs.Directory.goStudy();
    },
    getComments() {
      getCourseComments(this.$route.query.id).then((res) => {
        this.user = res.data.users;
        this.comments = res.data.comments;
        setTimeout(() => {
          this.finish = true;
        }, 400);
      });
    },
    comment(content) {
      commentCourse(this.$route.query.id, { content }).then((res) => {
        if (res.code != 0) return Notify(res.message);
        Notify({ type: 'success', message: '评论成功' });
        this.$refs.Comment.content = '';
        this.getComments();
      });
    },
  },
  created() {
    getCourseDetail(this.$route.query.id).then((res) => {
      this.course = res.data.course;
      this.chapters = res.data.chapters;
      this.videos = res.data.videos;
      this.isCollect = res.data.isCollect;
    });
    this.getComments();
  },
};
</script>

<style lang="less" scoped>
.container {
  padding-bottom: 52px;
  .course-title {
    font-size: 15.2px;
    padding: 12px 16px 0;
  }
  .course-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    .course-charge {
      color: #ff4d4f;
      font-size: 20px;
      &.free {
        color: #52c41a;
        font-size: 18px;
      }
    }
    .user-count {
      color: #999;
    }
  }
  .line {
    height: 8px;
    background-color: #f6f6f6;
  }
  .course-desc {
    padding: 20px;
  }
  .hasvalue {
    color: #1784ed;
  }
}
</style>
